<template>
  <div class="user-list-container">
    <div class="user-list-title">用户管理</div>
    <div class="search-bar">
      <el-input v-model="searchQuery" placeholder="请输入用户名搜索" class="search-input">
        <template #append>
          <el-button type="primary" @click="fetchUsers">搜索</el-button>
        </template>
      </el-input>
    </div>
    <el-table :data="userList" style="width: 100%">
      <el-table-column prop="id" label="用户ID" width="80"></el-table-column>
      <el-table-column prop="username" label="用户名"></el-table-column>
      <el-table-column prop="phone" label="手机号" width="120"></el-table-column>
      <el-table-column prop="email" label="邮箱"></el-table-column>
      <el-table-column prop="createTime" label="注册时间" width="180"></el-table-column>
      <el-table-column prop="status" label="状态" width="100">
        <template #default="scope">
          <el-switch v-model="scope.row.status" active-value="active" inactive-value="inactive" @change="changeStatus(scope.row)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" fixed="right">
        <template #default="scope">
          <el-button size="small" type="danger" @click="deleteUser(scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
import service from '~/axios';
import { toast, showModal } from '~/composables/util';
import { getToken } from '~/composables/auth';
import { useRouter } from 'vue-router';

const router = useRouter();
const userList = ref([]);
const searchQuery = ref('');
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);

onMounted(() => {
  if (!getToken()) {
    toast('请先登录', 'warning');
    router.push('/admin-login');
    return;
  }

  fetchUsers();
});

const fetchUsers = async () => {
  try {
    const res = await service.get('/api/admin/users', {
      params: {
        page: currentPage.value,
        pageSize: pageSize.value,
        keyword: searchQuery.value
      }
    });
    userList.value = res.list;
    total.value = res.total;
  } catch (error) {
    toast('获取用户列表失败，请稍后重试', 'error');
  }
};
</script>

<style scoped>
.user-list-container {
  padding: 20px;
}

.user-list-title {
  font-size: 24px;
  margin-bottom: 20px;
  color: #333;
}

.search-bar {
  margin-bottom: 20px;
}

.search-input {
  width: 300px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>

const deleteUser = async (row) => {
  try {
    await showModal(`确定要删除用户${row.username}?`, 'danger');
    await service.delete(`/api/admin/users/${row.id}`);
    toast('删除成功');
    fetchUsers();
  } catch (error) {
    toast('删除失败，请稍后重试', 'error');
  }
};